<!-- TODO(jelbourn): render the radio on either side of the content -->
<!-- TODO(mtlin): Evaluate trade-offs of using native radio vs. cost of additional bindings. -->
<label [attr.for]="inputId" class="md-radio-label">
  <!-- The actual 'radio' part of the control. -->
  <div class="md-radio-container">
    <div class="md-radio-outer-circle"></div>
    <div class="md-radio-inner-circle"></div>
    <div md-ripple *ngIf="!_isRippleDisabled()" class="md-radio-ripple"
         [md-ripple-trigger]="getHostElement()"
         [md-ripple-centered]="true"
         [md-ripple-speed-factor]="0.3"
         md-ripple-background-color="rgba(0, 0, 0, 0)"></div>
  </div>

  <input #input class="md-radio-input md-visually-hidden" type="radio"
          [id]="inputId"
          [checked]="checked"
          [disabled]="disabled"
          [name]="name"
          [attr.aria-label]="ariaLabel"
          [attr.aria-labelledby]="ariaLabelledby"
          (change)="_onInputChange($event)"
          (focus)="_onInputFocus()"
          (blur)="_onInputBlur()"
          (click)="_onInputClick($event)">

  <!-- The label content for radio control. -->
  <div class="md-radio-label-content" [class.md-radio-align-end]="align == 'end'">
    <ng-content></ng-content>
  </div>
</label>
